//模块类 基础提示框 data 渲染数据
var Alert = function(data){
	//没有数据则返回，防止后面程序执行
	if(!data)
		return;
	//设置内容
	this.content = data.content;
	//创建提示框面板
	this.panel = document.createElement('div');
	//创建提示内容组件
	this.contentNode = document.createElement('p');
	//创建确定按钮组件
	this.confirmBtn = document.createElement('span');
	//创建关闭按钮组件
	this.closeBtn = document.createElement('b');
	//未提示框面板添加类
	this.panel.className = 'alert';
	//为关闭按钮添加类
	this.closeBtn.className = 'a-close';
	//为确定按钮添加类
	this.confirmBtn.className = 'a-confirm';
	//为确定按钮添加文案
	this.confirmBtn.innerHTML = data.confirm || '确认';
	//为提示内容添加文本
	this.contentNode.innerHTML = this.content;
	//点击确定按钮执行方法，如果data中有success方法则为success方法，否则为空函数
	this.success = data.success || function(){};
	//点击关闭按钮执行方法
	this.fail = data.fail || function(){};
}


//模板的原型方法
//提示框原型方法
Alert.prototype = {
	//创建方法
	init : function(){
		//生成提示框
		this.panel.appendChild(this.closeBtn);
		this.panel.appendChild(this.contentNode);
		this.panel.appendChild(this.confirmBtn);
		//插入页面中
		document.body.appendChild(this.panel);
		//绑定事件
		this.bindEvent();
		//显示提示框
		this.show();
	},
	bindEvent : function(){
		var me = this;
		//关闭按钮点击事件
		this.closeBtn.onclick = function(){
			//执行关闭取消方法
			me.fail();
			//隐藏弹层
			me.hide();
		}
		//确定按钮点击事件
		this.confirmBtn.onclick = function(){
			//执行关闭取消方法
			me.success();
			//隐藏弹层
			me.hide();
		}
	},
	//隐藏弹层方法
	hide : function(){
		this.panel.style.display = 'none';
	},
	//显示弹层方法
	show : function(){
		this.panel.style.display = 'block';
	}
}

//右侧按钮提示框
var RightAlert = function(data){
	//继承基本提示框构造函数
	Alert.call(this, data);
	//为确认按钮添加right类设置位置居右
	this.confirmBtn.className = this.confirmBtn.className + 'right';
}
//继承基本提示框方法
RightAlert.prototype = new Alert();
//标题提示框
var TitleAlert = function(data){
	//继承基本提示框构造函数
	Alert.call(this, data);
	//设置标题内容
	this.title = data.title;
	//创建标题组件
	this.titleNode = document.createElement('h3');
	//标题组件中写入标题内容
	this.titleNode.innerHTML = this.title;
}
//继承基本提示框方法
TitleAlert.prototype = new Alert();
//对基本提示框创建方法拓展
TitleAlert.prototype.init = function(){
	//插入标题
	this.panel.insertBefore(this.titleNode, this.panel.firstChild);
	//继承基本提示框init方法
	Alert.prototype.init.call(this);
}
//带有取消按钮的弹出框
var CancelAlert = function(data){
	//继承标题提示框构造函数
	TitleAlert.call(this, data);
	//取消按钮文案
	this.cancel = data.cancel;
	//创建取消按钮
	this.cancelBtn = document.createElement('span');
	//为取消按钮添加类
	this.cancelBtn.className = 'cancel';
	//设置取消按钮内容
	this.cancelBtn.innerHTML = this.cancel || '取消';
}
//继承标题提示框原型方法
CancelAlert.prototype = new Alert();
CancelAlert.prototype.init = function(){
	//继承标题提示框创建方法
	TitleAlert.prototype.init.call(this);
	//由于取消按钮要添加在末尾，所以在创建完其他组件后添加
	this.panel.appendChild(this.cancelBtn);
}
CancelAlert.prototype.bindEvent = function(){
	var me = this;
	//标题提示框绑定事件方法继承
	TitleAlert.prototype.bindEvent.call(me);
	//取消按钮绑定事件
	this.cancelBtn.onclick = function(){
		//执行取消回调函数
		me.fail();
		//隐藏弹层
		me.hide();
	}
}
// //创建一个提示框
// new CancelAlert({
// 	title : '提示标题',
// 	content : '提示内容',
// 	// cancel : 'cancel',
// 	success : function(){
// 		console.log('ok');
// 	},
// 	fail : function(){
// 		console.log('cancel');
// 	}
// }).init();

//装饰者
var decorator = function(input, fn){
	//获取事件源
	var input = document.getElementById(input);
	//若事件源已经绑定事件
	if(typeof input.onclick === 'function'){
		//缓存事件源原有回调函数
		var oldClickFn = input.onclick;
		//为事件源定义新的事件
		input.onclick = function(){
			//为事件源原有回调函数
			oldClickFn();
			//执行事件源新增回调函数
			fn();
		}
	}else{
		//事件源未绑定事件，直接为事件源添加新增回调函数
		input.onclick = fn;
	}
	//做其他事情
}

decorator('confirm_again', function(){
	// document.getElementsByClassName('alert')[0].style.display = 'block';
			//创建一个提示框
			new CancelAlert({
				title : '提示标题',
				content : '提示内容',
				// cancel : 'cancel',
				success : function(){
					console.log('ok');
				},
				fail : function(){
					console.log('cancel');
				}
			}).init();
});


//格式化字符串方法
function formateString(str, data){
	return str.replace(/\{#(\w+)#\}/g, function(macth, key){return typeof data[key] === undefined ? '' : data[key]});
}
//基础导航
var Nav = function(data){
	//基础导航样式模板
	this.item = '<a href="{#href#}" title="{#title#}">{#name#}</a>';
	//创建字符串
	this.html = '';
	//格式化数据
	for(var i = 0, len = data.length; i < len; i++){
		this.html += formateString(this.item, data[i]);
	}
		console.log(data[0]);
	//返回字符串数据
	return this.html;
}

//带有消息提醒信息导航
var NumNav = function(data){
	//消息提醒信息组件模板
	var tpl = '<b>{#num#}</b>';
	//装饰数据
	for(var i = data.length - 1; i >= 0; i--){
		data[i].name += data[i].name + formateString(tpl, data[i]);
	}
			// console.log(data[0].name);

	//继承基础导航类，并返回字符串
	return Nav.call(this, data);
}
//带有链接地址的导航
var LinkNav = function(data){
	//链接地址模板
	var tpl = '<span>{#link#}</span>';
	//装饰数据
	for(var i = data.length - 1; i >= 0; i--){
		data[i].name += data[i].name + formateString(tpl, data[i]);
	}
	//继承基础导航类，并返回字符串
	return Nav.call(this, data);
}
//获取导航容器
var nav = document.getElementById('content');
//添加内容
nav.innerHTML = NumNav([
		{
			href : 'http://www.baidu.com/',
			title : '百度一下，你就知道',
			name : '百度',
			num : '10'
		},
		{
			href : 'http://www.taobao.com/',
			title : '淘宝商城',
			name : '淘宝',
			num : '2'
		},
		{
			href : 'http://www.qq.com/',
			title : '腾讯首页',
			name : '腾讯',
			num : '3'
		}
	])